為什麼要學習 redux-saga

• 主要用於管理 redux 中，非同步的 action

其他可選套件

• redux-loop
• redux-thunk
• redux-promise

優點

• 聲明式指令
• 可測試
• 可 mock
• code 集中在 saga 中管理，不再散落在各處，全同步執行，就算邏輯再複雜，看起來也不會亂 [1]
• 最主要還是解決複雜的異步交互情況，特別是競爭狀態 [3]

範例 [1]

使用 saga 前

• 在 action creator 裡處理邏輯，但是難以測試

// action creator with thunking
function createRequest () {
  return (dispatch, getState) => {
    dispatch({ type: 'REQUEST_STUFF' });
    someApiCall(function(response) {
      // some processing
      dispatch({ type: 'RECEIVE_STUFF' });
    });
  };
}

• 在 component 中

function onHandlePress () {
  this.props.dispatch({ type: 'SHOW_WAITING_MODAL' });
  this.props.dispatch(createRequest());
}

Code is everywhere.

使用 saga 後

• 通過 saga，你只需要觸發一個 action

function onHandlePress () {
  // createRequest 觸發 action `BEGIN_REQUEST`
  this.props.dispatch(createRequest());
}

• 然後所有後續的操作都通過 saga 管理

function *watchBeginRequest() {
  yield takeEvery('BEGIN_REQUEST', beginRequest);
}

function beginRequest() {
  yield put({ type: 'SHOW_WAITING_MODAL' });
  const response = yield call(myApiFunctionThatWrapsFetch);
  yield put({ type: 'PRELOAD_IMAGES', response.images });
  yield put({ type: 'HIDE_WAITING_MODAL' });
}

所有業務代碼都存於 saga 中，不再散落在各處
全同步執行，就算邏輯在複雜，看起來也不會亂

Reference

1. React + Redux 最佳实践
2. Redux-saga 中文文档
3. Pros/cons of using redux-saga with ES6 generators vs redux-thunk with ES7 async/await
4. Saga Pattern 在前端的應用